import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { connect, useDispatch } from "react-redux";
import { enableCorporateTheme } from "../../redux/actions/themeActions";

import {
  Button,
  Container,
  Nav,
  NavItem,
  NavLink,
  Navbar,
  NavbarBrand,
  Row
} from "reactstrap";

import {
  Box,
} from "react-feather";


const Navigation = () => (
  <Navbar dark expand="md" className="navbar-landing">
    <Container>
      <NavbarBrand href="/">
        <Box title="AppStack" />
        SGA App
      </NavbarBrand>
      <Nav className="ml-auto" navbar>
        <NavItem className="d-none d-md-inline-block">
          <NavLink href="/auth/sign-in"  active>
            Login
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="/auth/sign-up" active>
            Registration
          </NavLink>
        </NavItem>
        
      </Nav>
      <Button
        href="https://themes.getbootstrap.com/product/appstack-react-admin-dashboard-template/"
        target="_blank"
        rel="noopener noreferrer"
        color="primary"
        className="ml-2"
        size="lg"
      >
        Contact us
      </Button>
    </Container>
  </Navbar>
);

const Intro = () => {
  return (
  <section className="landing-intro pt-5">
    <Container>
              <Row>
                  <h1>Home page</h1>
              </Row>
          </Container>
       </section>
)};

const Styles = () => (
  <section id="demos" className="pt-3 pb-6">
    <Container className="position-relative z-3">
      <Row>
                <h1>for more design, create new function and put bottom</h1>
      </Row>
    </Container>
  </section>
);


const Landing = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(enableCorporateTheme());
  }, [dispatch]);

    return (

    <React.Fragment>
      <Navigation />
      <Intro />
      <Styles />
   
    </React.Fragment>
  )
}

export default connect()(Landing);
